<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="javascripts/zishiy.js"></script>
    <script src="javascripts/jquery.js"></script>
    <title>Document</title>
    <style>
        section{
            width: 6rem;
            height: 4.7rem;
            background-image: url("images/28.jpg");
            background-size: 100% 100%;
            background-repeat:no-repeat;
            margin: 0 auto;
            margin-top: 1rem;
        }
        h1{
            width: 3rem;
            margin: 0 auto;
            text-align: center;
            font-size: 0.3rem;
            color: red ;
            padding-top: 0.2rem;
        }
        div{
            width: 6rem;
            margin-left: 0.5rem;
            height: 1rem;
            /*border: 1px solid red;*/
            margin-top: -0.2rem;
            /*border: 1px solid red;*/

        }
        label{
            margin: 0;
            padding: 0;
            display: inline-block;
            width: 1.5rem;
            font-size: 0.2rem;
            margin-left: 0.6rem;
            margin-top: -0.5rem;
            text-align: right;
            color: blue;

        }
        .labe{
            width: 1.3rem;
            padding-left: 0.2rem;
        }
        .labe1{width: 1.1rem;
            padding-left: 0.4rem;
        }
        .labe3{
            width: 1.1rem;
            padding-left: 0.4rem;
        }
        input{
            width: 2rem;
            font-size: 0.15rem;
            height: 0.3rem;
            padding-left: 0.2rem;
        }
        .sub{
            width: 1.2rem;
            height: 0.5rem;
            font-size: 0.2rem;
            background-color: blue;
            color: white;
            text-align: center;
            margin-left: 2.6rem;

        }
        span{
            display: block;
            font-size: 0.2rem;
            margin-top: -0.1rem;
            margin-left: 1rem;
            color: red;
            margin-left: 2.65rem;
            display: none;
        }
    </style>
</head>
<body>
<section>
    <h1>注册新用户</h1>
    <form method="post">
        <div>
            <label class="labe">用户名:</label>
            <input class="la1" type="text" placeholder="用户名" name="name" required><br>
            <span class="spa"></span>
        </div>
        <div>
            <label class="labe1">密码:</label>
            <input class="la2" type="password" placeholder="密码" name="password" required><br>
            <span class="spa1"></span>
        </div>
        <div>
            <label class="labe2">确认密码:</label>
            <input class="la3" type="password" placeholder="确认密码" name="password-repeat" required><br>
            <span class="spa2"></span>
        </div>
        <div>
            <label class="labe3">邮箱:</label>
            <input  class="la4" type="email" placeholder="邮箱" name="email" required><br>
            <span class="spa3"></span>
        </div>
        <div>
            <input class="sub" type="submit" value="提交">
        </div>

    </form>

</section>
</body>
</html>
<script>
    $(function () {
        var name = '';
        var name1;
        var mima;
        var mima1;
        var qmima;
        var qmima1;
        var email;
        var email1;
        $('.la1').focus(function () {
            $(window).keyup(function () {
                name = /^\w{6,16}$/;
                name1 =$('.la1').val();
                if(name.test(name1)){
                    $('.spa').show().text('姓名格式正确');
                }else{
                    $('.spa').show().text('姓名为字符串，6-16位!');
                }
            })
        })

        $('.la2').focus(function () {
            $(window).keyup(function () {
                mima = /^[a-zA-Z]\w{5,17}$/;
                mima1 = $('.la2').val();
                if(mima.test(mima1)){
                    $('.spa1').show().text('密码格式正确');
                }else{
                    $('.spa1').show().text('密码位字符串,6-19位!')
                }
            })
        })
        $('.la3').focus(function () {
            $(window).keyup(function () {
                qmima = /^[a-zA-Z]\w{5,17}$/;
                qmima1 =$('.la3').val();
                if(qmima.test(qmima1) && mima1 ==qmima1){
                    $('.spa2').show().text('与密码相等');
                }else if(qmima.test(qmima1)){
                    $('.spa2').show().text('确认密码格式正确');
                }else if(mima1 != qmima1){

                } else{
                    $('.spa2').show().text('密码位字符串,6-19位!');
                }
            })
        })
        $('.la4').focus(function () {
            $(window).keyup(function () {
                email =/^(\d+)(\@)(\w+)(\.)(\w+)$/;
                email1 =$('.la4').val();
                if(email.test(email1)){
                    $('.spa3').show().text('email格式正确！')
                }else{
                    $('.spa3').show().text('email格式为数字@qq.com');
                }
            })
        })
    })
</script>
